<template>
	<view>
		<u-navbar :border-bottom="false">
		</u-navbar>
		<view class="u-flex u-row-between u-m-x-30 u-p-b-20 lurk">
			<text class="u-font-50">群公告</text>
			<view class="u-p-x-30 u-p-y-10" v-if="userId==group.userId"><text class="u-font-32">发布</text></view>
		</view>
		<view class="head" :style="{top:`${navBar}px`}">
			<view class="u-flex u-row-between u-m-x-30 u-p-b-20">
				<text class="u-font-50 text-bold">群公告</text>
				<view class="u-p-x-30 u-p-y-10 round bg-theme" v-if="userId==group.userId" @tap="jumpTo(`/pages/group/notice/publish?gid=${id}`)">
					<text class="u-font-32">发布</text>
				</view>
			</view>
		</view>
		<u-card margin="10rpx 30rpx" padding="0" :head-border-bottom="false" @click="toDetail(item)" v-for="(item,idx) in notice.list" :key="idx">
			<view slot="body" class="u-m-20">
				<view class="u-line-3">
					<text class="u-font-28">{{item.noticeContent}}</text>
				</view>
			</view>
			<view class="u-flex u-row-between u-p-20" slot="foot">
				<view class="">
					<!-- <text class="u-font-24 text-gray">公告发布者</text> -->
				</view>
				<view class="u-flex">
					<text class="u-font-24 text-gray">{{item.createDate}}</text>
					<view class="u-m-l-30 text-blue">
						查看详情
					</view>
				</view>
			</view>
		</u-card>
		<u-empty v-if="notice.nomore&&!notice.list.length" text="暂无群公告" mode="list" :margin-top="100"></u-empty>
	</view>
</template>

<script>
	import {jumpTo} from "@/utils/util.js"
	import { fetchGroupInfo } from '@/api/addr';
	import { fetchNotices } from '@/api/group';
	import {mapGetters} from "vuex"
	import {event} from "../bus.js"
	export default {
		data() {
			return {
				id:'',
				group:{},
				role:{}, 
				
				notice:{
					list:[],
					pageNo:1,
					pageSize:10,
					loading:false,
					nomore:false
				}
			};
		},
		computed:{
			...mapGetters('user',['userId'])
		},
		onLoad({id}) {
			this.id = id
			this.initGroup()
			this.resetNotice()
			event.$on('notice_changed',this.resetNotice)
			event.$on('notice_removed',this.onNoticeRemoved)
		},
		onUnload() {
			event.$off('notice_changed',this.resetNotice)
			event.$off('notice_removed',this.onNoticeRemoved)
		},
		async onPullDownRefresh() {
			try{
				await this.resetNotice()
			}finally{
				uni.stopPullDownRefresh()
			}
		},
		onReachBottom() {
			this.moreNotice()
		},
		methods:{
			jumpTo,
			toDetail(item){
				jumpTo(`/pages/group/notice/detail?id=${item.id}`)
			},
			async initGroup(){
				this.group = await fetchGroupInfo(this.id)
			},
			async resetNotice(){
				this.notice.list = []
				this.notice.pageNo = 1
				this.notice.nomore = false
				await this.moreNotice()
			},
			async moreNotice(){
				if(this.notice.loading){
					throw new Error('正在请求中')
				}
				try{
					this.notice.loading = true
					if(this.notice.nomore){
						return []
					}
					const list = await fetchNotices({
						id:this.id,
						pageNo:this.notice.pageNo,
						pageSize:this.notice.pageSize
					})
					if(!list||list.length<this.notice.pageSize){
						this.notice.nomore = true
					}else{
						this.notice.pageNo++
					}
					this.notice.list.push(...list)
					return list
				}finally{
					this.notice.loading = false
				}
			},
			onNoticeRemoved(id){
				console.log('暗杀的咖啡机好',id)
				this.notice.list = this.notice.list.filter((item)=>id!=item.id)
			}
		}
	}
</script>
<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.lurk{
		opacity: 0;
	}
	.head{
		position: fixed;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #FFFFFF;
	}
</style>
